<link  href="__PLU__/bootstrap-validator/bootstrapValidator.min.css" rel="stylesheet">
<link  href="__PLU__/magic-check/css/magic-check.min.css" rel="stylesheet">
<link  href="__PLU__/bootstrap-select/bootstrap-select.min.css" rel="stylesheet">
<script src="__PLU__/bootstrap-validator/bootstrapValidator.min.js"></script>
<script src="__PLU__/bootstrap-select/bootstrap-select.min.js"></script>
<script src="__PLU__/bootbox/bootbox.min.js"></script>
<div class="modal fade" id="members-modal" role="dialog" tabindex="-1" aria-labelledby="members-modal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <!--Modal header-->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><i class="pci-cross pci-circle"></i></button>
                <h4 class="modal-title">添加用户</h4>
            </div>
            <!--Modal body-->
            <div class="modal-body">
                <form id="members-form" class="form-horizontal" action="{:url('admin/members/save_member')}" method="post">
                    <div class="tab-content">
                        <div class="form-group">
                            <label class="col-lg-3 control-label">用户组</label>
                            <div class="col-lg-7" style="padding-left: 11px;">
                                <select class="selectpicker" id="member-group" name="member[group]">
                                    <option value="">无</option>
                                    {foreach $groups as $group}
                                    <option value="{$group.group_id}">{$group.name}</option>
                                    {/foreach}
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-3 control-label" for="member-name">用户名</label>
                            <div class="col-lg-7">
                                <input type="text" class="form-control" id="member-name" name="member[name]">
                                <input type="hidden" id="member-id" name="member[id]" value="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-3 control-label" for="member-email">邮箱</label>
                            <div class="col-lg-7">
                                <input type="text" class="form-control" id="member-email" name="member[email]">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-3 control-label" for="member-phone">手机号</label>
                            <div class="col-lg-7">
                                <input type="text" class="form-control" id="member-phone" name="member[phone]">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-3 control-label">是否启用</label>
                            <div class="col-lg-7">
                                <div class="radio">
                                    <input id="member-use-true" class="magic-radio" type="radio" name="member[is_use]" checked="checked" value="true">
                                    <label for="member-use-true">是</label>
                                    <input id="member-use-false" class="magic-radio" type="radio" name="member[is_use]" value="false">
                                    <label for="member-use-false">否</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <!--Modal footer-->
            <div class="modal-footer">
                <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
                <button class="btn btn-primary" form="members-form" type="button">保存</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
$(document).ready(function(){
    $('#members-form').bootstrapValidator({
        feedbackIcons: {
            valid: 'glyphicon',
            invalid: 'glyphicon',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            'member[group]': {
                validators: {
                    notEmpty: {
                        message: '请选择用户组'
                    }
                }
            },
            'member[name]': {
                validators: {
                    notEmpty: {
                        message: '请输入用户名'
                    }
                }
            },
            'member[email]': {
                validators: {
                    notEmpty: {
                        message: '请输入邮箱'
                    }
                }
            },
            'member[phone]': {
                validators: {
                    notEmpty: {
                        message: '请输入手机号'
                    }
                }
            },
            'member[id]': {},
        }
    });
});
$('button[form="members-form"]').on('click',function(){
    $('#members-form').data('bootstrapValidator').validate();  
    if(!$('#members-form').data('bootstrapValidator').isValid()){  
        return false;
    }
    $.ajax({
        url:"{:url('admin/members/save_member')}",
        type:"post",
        data:$('#members-form').serialize(),
        dataType:"json",
        success:function(result){
            if(result.status == 'success'){
                $('#members-modal').modal('hide');
                $.niftyNoty({
                    type: 'success',
                    icon : 'pli-exclamation icon-2x',
                    message : result.msg,
                    container : 'floating',
                    timer : 1500,
                });
                setTimeout(function(){
                    window.location.reload();
                },1500);
            }else{
                $.niftyNoty({
                    type: 'warning',
                    icon : 'pli-exclamation icon-2x',
                    message : result.msg,
                    container : 'floating',
                    timer : 1500,
                });
            }
        },
        error:function(){
            $.niftyNoty({
                type: 'danger',
                icon : 'pli-exclamation icon-2x',
                message : '网络连接失败',
                container : 'floating',
                timer : 1500,
            });
        }
    });
});
    $('#members-modal').on('show.bs.modal', function (e) {
        var memberid = $($(e)[0].relatedTarget).data('memberid');
        if(memberid == undefined){
            $('#members-form').bootstrapValidator('resetForm', true);
            $('.selectpicker').selectpicker('refresh');
            $('input[name="member[is_use]"][value="true"]').prop('checked','true');
        }else{
            $.ajax({
                url:"{:url('admin/members/get_member')}",
                type:"post",
                data:{'memberid':memberid},
                dataType:"json",
                success:function(result){
                    if(result.status == 'success'){ 
                        var member = result.data;
                        $('#member-name').val(member.login_name);
                        $('#member-id').val(member.member_id);
                        $('#member-email').val(member.email);
                        $('#member-phone').val(member.mobile);
                        $('input[name="member[is_use]"][value="'+member.is_use+'"]').prop('checked','true');
                        $('#member-group').val(member.group_id);
                        $('#member-group').selectpicker('render');
                    }else{
                        $.niftyNoty({
                            type: 'warning',
                            icon : 'pli-exclamation icon-2x',
                            message : result.msg,
                            container : 'floating',
                            timer : 1500,
                        });
                    }
                },
                error:function(){
                    $.niftyNoty({
                        type: 'danger',
                        icon : 'pli-exclamation icon-2x',
                        message : '网络连接失败',
                        container : 'floating',
                        timer : 1500,
                    });
                }
            });
        }
    });
</script>